import './index.scss'
import { Button, Form, Input, Picker, View } from '@tarojs/components'
import { observer } from 'mobx-react'
import { useContext, useEffect, useState } from 'react'
import Taro, { useDidHide, useDidShow, useRouter } from '@tarojs/taro'
import { baseInfoEditStore } from './model'

const Baseinfoedit = () => {
  let router = useRouter()
  const {
    updatePageQuery,
    updatePageDataSource,
    devName,
    address,
    provinces,
    changeProvinces,
    editDevBaseInfo
  } = useContext(baseInfoEditStore)
  const [input_devName, changeInputDevName] = useState('')
  const [input_address, changeInputAddress] = useState('')
  const [input_provinces, changeInputProvinces] = useState<string[]>([])

  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Baseinfoedit useEffect')
  })
  // 对应 onShow
  useDidShow(() => {
    console.log('Baseinfoedit useDidShow')
    updatePageQuery(router.params)
    updatePageDataSource((d, a, p) => {
      changeInputDevName(d)
      changeInputAddress(a)
      changeInputProvinces(p)
    })
  })
  // 对应 onHide
  useDidHide(() => {
    console.log('Baseinfoedit useDidHide')
  })
  return (
    <View className="container px-16">
      <Form
        onSubmit={e => {
          console.log(e)
          e.detail.value && editDevBaseInfo(e.detail.value)
        }}
      >
        {(devName ?? null) !== null ? (
          <>
            <View className="hanzi mt-24 text-16 font-medium">设备名称</View>
            <View className="h-42 px-10 mt-10 bg-white rounded-4 overflow-hidden">
              <Input
                name="devName"
                value={input_devName}
                className="h-full"
                placeholder="请输入设备名称"
                placeholderStyle="color:#bfbfbf"
                onInput={e => {
                  changeInputDevName(e.detail.value)
                }}
              ></Input>
            </View>
          </>
        ) : null}
        {(provinces ?? null) !== null ? (
          <>
            <View className="hanzi mt-34 text-16 font-medium">省市区</View>
            <View className="h-42 leading-42 px-10 mt-10 bg-white rounded-4 overflow-hidden">
              <Picker
                name="provinces"
                mode="region"
                value={input_provinces}
                onChange={data => {
                  console.log(data)
                  changeInputProvinces(data.detail.value)
                  changeProvinces(data.detail.value)
                }}
              >
                <Input
                  value={provinces ? provinces.join('-') : ''}
                  className="w-full h-42"
                  placeholder="选择地址"
                  disabled={true}
                ></Input>
              </Picker>
            </View>
          </>
        ) : null}
        <View className="hanzi mt-34 text-16 font-medium">设备地址</View>
        <View className="h-42 px-10 mt-10 bg-white rounded-4 overflow-hidden">
          {/* 
            disabled={(address ?? null) === null}
          */}
          <Input
            name="address"
            value={input_address}
            className="h-full"
            placeholder="输入您的设备地址"
            placeholderStyle="color:#bfbfbf"
            onInput={e => {
              console.log(input_address, e.detail.value)
              console.log(e.detail.value)

              changeInputAddress(e.detail.value)
            }}
          ></Input>
        </View>
        <View className="px-12 mt-48">
          <Button
            className="hanzi w-full bg-primary text-16 text-white font-medium rounded-6"
            formType="submit"
          >
            保存
          </Button>
        </View>
      </Form>
    </View>
  )
}
export default observer(Baseinfoedit)
